<template>
    <div>
        <el-form ref="form" :model="OnFile" label-width="80px">
            <el-container>
            <el-form-item label="案件">
                <el-input v-model="OnFile.caseNo" @focus="showcaselaw" ></el-input>
            </el-form-item>
            </el-container>
            <el-form-item label="文件夹">
                <el-select v-model="OnFile.folderId" placeholder="选择文件夹">
                    <el-option v-for="folder in folders" :label="folder.folderName" :value="folder.id" :key="folder.id"></el-option>
                </el-select>
                <el-button type="primary" @click="toaddfolder">添加文件夹</el-button>
            </el-form-item>

            <el-container>
                <el-form-item label="相关文件:">
                    <el-upload
                            name="multipartfile"
                            action="http://localhost/upload"
                            :headers="{token:this.$store.state.token}"
                            :data="{folder:'RecordDocument'}"
                            class="upload-demo"
                            ref="upload"
                            :limit="1"
                            :multiple="false"
                            :auto-upload="false"
                            :on-success="handleUploadSuccess">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </el-form-item>
                <el-input v-model="OnFile.documentFile" v-show="false"></el-input>
            </el-container>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button>取消</el-button>
            </el-form-item>

        </el-form>




        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%">
            <recordcaseLaw v-if="dialogVisible" v-on:caseNo="setcaseNo"></recordcaseLaw>
        </el-dialog>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible2"
                width="50%">
            <el-form ref="form" :model="folder" label-width="80px">
                <el-container>
                    <el-form-item label="文件夹">
                        <el-input v-model="folder.folderName"></el-input>
                    </el-form-item>
                </el-container>


                <el-form-item>
                    <el-button type="primary" @click="add">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </div>


</template>

<script>

    import recordcaseLaw from './recordcaseLaw.vue'


    import FolderService from '../../../model/mfy/onFile/FolderService.js'
    var  folderService =FolderService.getInstance();

    import OnFileService from '../../../model/mfy/onFile/OnFileService.js'
    var  onFileService =OnFileService.getInstance();


    export default {
        name: "OnFile",
        data(){
            return{
                OnFile:{},
                dialogVisible:false,
                dialogVisible2:false,
                folders:[],
                folder:{},
            }
        },
        methods:{
            onSubmit(){

                if(this.OnFile.caseNo==null || this.OnFile.caseNo=='' ){
                    this.$message.error("案件不能为空")
                    return;
                }

                if(this.OnFile.folderId==null || this.OnFile.folderId=='' ){
                    this.$message.error("文件夹不能为空")
                    return;
                }

                if(this.OnFile.documentFile==null || this.OnFile.documentFile=='' ){
                    this.$message.error("请选择文件!")
                    return;
                }


                onFileService.save(this.OnFile).then(()=>{
                    this.$emit("gotoMy")
                })
            },

            SelectFolder(){
                folderService.SelectFolder().then((response)=>{
                    this.folders = response.data.data
                })
            },
            showcaselaw(){
                this.dialogVisible=true
            },
            setcaseNo(caseno){
                this.OnFile.caseNo=caseno;
                this.dialogVisible=false;
            },
            toaddfolder(){
                this.dialogVisible2=true;
            },
            add(){
                folderService.save(this.folder).then(()=>{
                    this.dialogVisible2=false;
                    this.SelectFolder();
                })
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleUploadSuccess(response,file){
                this.OnFile.documentName = file.name
                this.OnFile.documentFile = response.data
            },
        },
        created() {
            this.SelectFolder();
        },
        components:{
            recordcaseLaw
        }
    }
</script>

<style scoped>

</style>